<template>
  <div>
    <mobileNavigationVue
      v-if="isMobileTerminal"
      :data="categoryData"
    ></mobileNavigationVue>
    <pcNavigationVue v-else></pcNavigationVue>
    <!-- <mobile-navigation-vue v-if="isMobileTerminal" />
        <pc-navigation-vue v-else/> -->
  </div>
</template>
<script setup>
import { isMobileTerminal } from "@/utils/flexible";
import { getCategory } from "@/api/category";
import { ALL_CATEGORY_ITEM } from "@/constants";
import mobileNavigationVue from "./mobile/index.vue";
import pcNavigationVue from "./pc/index.vue";

import { ref } from "vue";

const categoryData = ref([]);

const getCategoryData = async () => {
  const { categorys } = await getCategory();
  categoryData.value = categorys;
  categoryData.value.unshift(ALL_CATEGORY_ITEM);
};
getCategoryData();
</script>
